<template>
	<view>
		<view class="car-input-container">
			<view class="car-input-box" v-for="(item,index) in inputList" :key="index" @click="plateInput(index)">
				<view class="car-input-item items" v-if="index === 2">
					<text></text>
				</view>
				<view v-else class="car-input-item"
					:class="[curInput == index?'sel-item':'',(maxNum-1) == index?'last-item':'']">
					<view :class="curInput == index?'sel-item-line':''"></view>
					<img :src="xnyImgBase64" class="new-item-img" v-if="(maxNum-1) == index" />
					{{item}}
				</view>
			</view>
		</view>

		<view class="car-number-container" v-if="showKeyPop1">
			<view class="plate-close" @click="closeKeyboard"><text class="plate-close-btn">关闭</text></view>
			<view class="plate-popup-list">
				<view class="plate-popup-item province-item" v-for="(item,index) in keyProvince1" :key="index"
					@click="tapKeyboard(item)">{{item}}</view>
			</view>
			<view class="plate-popup-list">
				<view class="plate-popup-item province-item" v-for="(item,index) in keyProvince2" :key="index"
					@click="tapKeyboard(item)">{{item}}</view>
			</view>
			<view class="plate-popup-list">
				<view class="plate-popup-item province-item" v-for="(item,index) in keyProvince3" :key="index"
					@click="tapKeyboard(item)">{{item}}</view>
			</view>
			<view class="plate-popup-list">
				<view class="plate-popup-item province-item" v-for="(item,index) in keyProvince4" :key="index"
					@click="tapKeyboard(item)">{{item}}</view>
				<!-- 删除 -->
				<view class="plate-popup-item province-item del" @click="onPlateDelTap">
					<image :src="deleteImgBase64" />
				</view>
			</view>
		</view>

		<view class="car-number-container" v-if="showKeyPop2">
			<view class="plate-close" @click="closeKeyboard"><text class="plate-close-btn">关闭</text></view>
			<view class="plate-popup-list">
				<view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''"
					v-for="(item,index) in keyEnInput1" :key="index" @click="tapKeyboard(item)">
					{{item}}
				</view>
			</view>
			<view class="plate-popup-list">
				<view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''"
					v-for="(item,index) in keyEnInput2" :key="index" @click="tapKeyboard(item)">
					{{item}}
				</view>
			</view>
			<view class="plate-popup-list">
				<view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''"
					v-for="(item,index) in keyEnInput3" :key="index" @click="tapKeyboard(item)">
					{{item}}
				</view>
			</view>
			<view class="plate-popup-list">
				<view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''"
					v-for="(item,index) in keyEnInput4" :key="index" @click="tapKeyboard(item)">
					{{item}}
				</view>
				<!-- 删除 -->
				<view class="plate-popup-item del" @click="onPlateDelTap">
					<image :src="deleteImgBase64" />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		defineEmits,
		defineProps,
		ref,
		watch
	} from 'vue'

	const xnyImgBase64 = ""
	const deleteImgBase64 = ""


	const inputList = ref([" ", " ", "·", " ", " ", " ", " ", " ", " "])
	const curInput = ref(0)
	const showKeyPop1 = ref(false)
	const maxNum = ref(9)
	const showKeyPop2 = ref(false)
	const keyProvince1 = ref(['京', '津', '晋', '冀', '蒙', '辽', '吉', '黑', '沪'])
	const keyProvince2 = ref(['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'])
	const keyProvince3 = ref(['粤', '桂', '琼', '渝', '川', '贵', '云', '藏'])
	const keyProvince4 = ref(['陕', '甘', '青', '宁', '新', 'W'])
	const keyEnInput1 = ref(["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"])
	const keyEnInput2 = ref(["Q", "W", "E", "R", "T", "Y", "U", "P", "学", "军"])
	const keyEnInput3 = ref(["A", "S", "D", "F", "G", "H", "J", "K", "L", "警"])
	const keyEnInput4 = ref(["Z", "X", "C", "V", "B", "N", "M", "港", "澳"])
	const lockInput = ref(["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"])

	const emit = defineEmits(['numberInputResult', 'change'])
	const props = defineProps({
		defaultStr: {
			type: String,
			default: ''
		},
		plateNum: {
			type: String,
			default: ''
		},
		shopPop: {
			type: Boolean,
			default: false
		},

	})

	watch(() => props.defaultStr, (val) => {
		if (val) {
			const valList = val.split("")
			for (let i in valList) {
				inputList.value[i] = valList[i]
			}
		} else {
			inputList.value = [" ", " ", "·", " ", " ", " ", " ", " ", " "]
		}
	}, {
		immediate: true
	})

	if (props.defaultStr != "" && props.defaultStr != null) {
		const valList = props.defaultStr.split("")
		for (let i in valList) {
			inputList.value[i] = valList[i]
		}
	}

	watch(() => props.shopPop, (val) => {
		if (val) {
			if (curInput.value <= 0) {
				curInput.value = 0
			}
			showOrHidePop(curInput.value)
		} else {
			showKeyPop1.value = false
			showKeyPop2.value = false
		}
	}, {
		immediate: true
	})

	watch(curInput, (val) => {
		showOrHidePop(val)
		keyEnInput2.value = ["Q", "W", "E", "R", "T", "Y", "U", "O", "P", "军"]
		switch (val) {
			case 1:
				lockInput.value = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "学", "军", "警", "港", "澳"]
				break
			case 2:
				lockInput.value = ["O", "学", "军", "警", "港", "澳"]
				break
			case 3:
				lockInput.value = ["O", "学", "军", "警", "港", "澳"]
				break
			case 4:
				lockInput.value = ["O", "学", "军", "警", "港", "澳"]
				break
			case 5:
				lockInput.value = ["O", "学", "军", "警", "港", "澳"]
				break
			case 6:
				lockInput.value = ["O"]
				keyEnInput2.value = ["Q", "W", "E", "R", "T", "Y", "U", "P", "学", "军"]
				break
			case 7:
				lockInput.value = ["O", "学", "军", "警", "港", "澳"]
				break
			default:
				lockInput.value = []
				break
		}
	})

	const plateInput = (e) => {
		curInput.value = e
		showOrHidePop(e)
	}

	const showOrHidePop = (val:number) => {
		if (val == -1) {
			showKeyPop1.value = false
			showKeyPop2.value = false
		} else if (val == 0) {
			showKeyPop1.value = true
			showKeyPop2.value = false
		} else {
			showKeyPop1.value = false
			showKeyPop2.value = true
		}
	}
	const tapKeyboard = (e) => {
		if (lockInput.value.includes(e)) {
			return
		}

		inputList.value[curInput.value] = e

		if (curInput.value < maxNum.value - 2) {
			if (curInput.value === 1) {
				curInput.value += 2
				return
			}
			curInput.value++
		} else {
			curInput.value = -1
		}

		emitResult()
	}

	const closeKeyboard = () => {
		curInput.value = -1
	}
	const onPlateDelTap = () => {
		if (inputList.value[curInput.value] == " ") {
			if (curInput.value === 3) {
				curInput.value -= 2
				inputList.value[curInput.value] = " "
				return
			}
			curInput.value--
		}
		inputList.value[curInput.value] = " "

		emitResult()
	}

	const emitResult = () => {
		const returnResult = inputList.value.join("")
		emit('numberInputResult', returnResult);
	}
</script>

<style scoped lang="scss">
	.car-input-container {
		position: relative;
		padding: 0 5px;
		height: 44px;

		.car-input-box {
			display: inline-block;
			width: 10.9%;
			height: 44px;
			vertical-align: middle;

			.car-input-item {
				position: relative;
				border: 1px solid #E2E2E2;
				height: 40px;
				line-height: 40px;
				width: 80%;
				margin-left: 10%;
				text-align: center;
				font-size: 17px;

				.sel-item-line {
					position: absolute;
					bottom: 3px;
					left: 15%;
					height: 2px;
					background-color: $dcolor;
					width: 70%;
					animation-duration: 0.8s;
					animation-name: identifier;
					animation-iteration-count: infinite;
				}

				@keyframes identifier {
					from {
						opacity: 1;
					}

					to {
						opacity: 0;
					}
				}

				.new-item-img {
					position: absolute;
					top: -6px;
					left: 50%;
					margin-left: -15px;
					height: 13px;
					width: 30px;
					z-index: 9;
				}
			}

			.items {
				@include flexCC;
				border: none;

				text {
					width: 12rpx;
					height: 12rpx;
					background: #16161F;
					border-radius: 12rpx;
				}

			}

			.sel-item {
				color: $dcolor;
			}

			.last-item {
				border: 1px solid #18bc37;
			}
		}
	}

	.car-number-container {
		position: fixed;
		z-index: 999;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 254px;
		background-color: #E3E2E7;
		-webkit-box-shadow: 0 0 30upx rgba(0, 0, 0, 0.1);
		box-shadow: 0 0 30upx rgba(0, 0, 0, 0.1);
		overflow: hidden;
		text-align: center;

		.plate-close {
			height: 40px;
			line-height: 40px;
			text-align: right;
			background-color: #FFF;

			.plate-close-btn {
				font-size: 13.5px;
				color: #555;
				margin-right: 15px;
			}
		}

		//键盘主体内容-单行
		.plate-popup-list {
			margin: 0 auto;
			overflow: hidden;
			display: inline-block;
			display: table;

			&:last-child {
				margin-bottom: 2px;
			}
		}

		//键盘主体内容-单个
		.plate-popup-item {
			float: left;
			font-size: 16px;
			width: 8vw;
			margin: 0 1vw;
			margin-top: 8px;
			height: 40px;
			line-height: 40px;
			background: #FFFFFF;
			border-radius: 5px;
			color: #4A4A4A;

			image {
				width: 16px;
				height: 16px;
				margin: 12px auto;
			}
		}

		.plate-popup-item:active {
			background-color: #EAEAEA;
		}

		.province-item {
			width: 8.8vw;
		}

		.lock-item {
			color: #AAA;
		}
	}
</style>